<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mxgraph</title>
    <script>
        // 基础配置
        window.urlParams = (function (url) {
            const result = {};
            let idx = url.lastIndexOf('?');
            if (idx > 0) {
                const params = url.substring(idx + 1).split('&');
                for (let i = 0; i < params.length; i++) {
                    idx = params[i].indexOf('=');
                    if (idx > 0) {
                        result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
                    }
                }
            }
            return result;
        })(window.location.href);
        // 这个地址是mxClient.js加载相关脚本用的，这里用的官方的脚本资源
        window.mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';
        window.STENCIL_PATH='https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/stencils'

    </script>
    <script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/js/Init.js"></script>
    <script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/deflate/pako.min.js"></script>
    <script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/deflate/base64.js"></script>
    <script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/jscolor/jscolor.js"></script>
    <script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/sanitizer/sanitizer.min.js"></script>
    <script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js"></script>

    <!-- 编辑器相关 -->
    <link rel="stylesheet" type="text/css" href="https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/styles/grapheditor.css">
    <script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/js/EditorUi.js"></script>
    <script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/js/Editor.js"></script>
    <script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/js/Sidebar.js"></script>
    <script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/js/Graph.js"></script>
    <script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/js/Format.js"></script>
    <script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/js/Shapes.js"></script>
    <script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/js/Actions.js"></script>
    <script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/js/Menus.js"></script>
    <script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/js/Toolbar.js"></script>
    <script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/js/Dialogs.js"></script>
    <script>
        // 添加爪子箭头, style=endArrow=claw;startArrow=claw;
        function createClaw(widthFactor) {
            widthFactor = (widthFactor != null) ? widthFactor : 2;
            return function (canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) {
                let endOffsetX = unitX * sw * 1.118;
                let endOffsetY = unitY * sw * 1.118;
                unitX = unitX * (size + sw);
                unitY = unitY * (size + sw);
                let pt = pe.clone();
                pt.x -= endOffsetX;
                pt.y -= endOffsetY;
                let f = (type != mxConstants.ARROW_CLASSIC && type != mxConstants.ARROW_CLASSIC_THIN) ? 1 : 3 / 4;
                pe.x += -unitX * f - endOffsetX;
                pe.y += -unitY * f - endOffsetY;
                const y = (pt.y === pe.y ? pt.x > pe.x ? -unitX : unitX : 0) / widthFactor;
                const x = (pt.x === pe.x ? pt.y < pe.y ? unitY : -unitY : 0) / widthFactor;
                return function () {
                    canvas.begin();
                    canvas.moveTo(pe.x, pe.y);
                    canvas.lineTo(pt.x, pt.y);
                    canvas.moveTo(pe.x, pe.y);
                    canvas.lineTo(pt.x + x, pt.y + y);
                    canvas.moveTo(pe.x, pe.y);
                    canvas.lineTo(pt.x - x, pt.y - y);
                    canvas.close();
                    canvas.stroke();
                };
            }
        }

        mxMarker.addMarker('claw', createClaw(1.5));
    </script>
</head>
<body style="user-select: none">
<div id="graph" style="border: 1px solid red;display: inline-block;width: 400px;height: 400px;"></div>
<script>
    // 只展示图形-示例
    // var 全局变量
    var xml = `
<mxGraphModel grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="0" pageScale="1">
    <root>
        <mxCell id="0"/>
        <mxCell id="1" parent="0"/>
        <mxCell id="6" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;endArrow=claw;" edge="1" parent="1" source="2" target="5">
            <mxGeometry relative="1" as="geometry"/>
        </mxCell>
        <mxCell id="2" value="学校" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
            <mxGeometry x="60" y="60" width="120" height="60" as="geometry"/>
        </mxCell>
        <mxCell id="5" value="学生" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
            <mxGeometry x="60" y="210" width="120" height="60" as="geometry"/>
        </mxCell>
    </root>
</mxGraphModel>`;
    (function () {
        const graph = new mxGraph(document.getElementById('graph'))
        graph.model.clear()
        let xmlDoc = mxUtils.parseXml(xml);
        let codec = new mxCodec(xmlDoc);
        codec.decode(xmlDoc.documentElement, graph.getModel());
        graph.setEnabled(false);
        // graph.fit(); // 自适应缩放
    })();
</script>

<div id="editor" style="border: 1px solid green;display: inline-block;width: 800px;height: 400px;position: relative"></div>
<script>
    // 编辑器
    (function () {
        // 语言资源
        let bundle = 'https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/resources/grapheditor.txt';
        // 默认样式
        let defaultThemes='https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/styles/default.xml'
        mxUtils.getAll([bundle,defaultThemes ], function (xhr) {
            // 添加语言配置
            mxResources.parse(xhr[0].getText());

            // 配置默认样式
            let themes = {};
            themes[Graph.prototype.defaultThemeName] = xhr[1].getDocumentElement();
            const editor = new EditorUi(new Editor(false, themes), document.getElementById('editor'))
            //初始化完成后可以再进一步配置编辑器，比如添加右键菜单，或者添加工具栏按钮等等
            let xmlDoc = mxUtils.parseXml(xml);
            let codec = new mxCodec(xmlDoc);
            codec.decode(xmlDoc.documentElement, editor.editor.graph.getModel());
        }, function () {
            document.body.innerHTML = '<center style="margin-top:10%;">Error loading resource files. Please check browser console.</center>';
        });
    })();
    const toolbarInit = Toolbar.prototype.init;
    Toolbar.prototype.init = function () {
        toolbarInit.apply(this, arguments);
        this.editorUi.menus.put('save', new Menu(() => this.editorUi.actions.get('save').funct(), true))
        this.addMenu('geSprite-print', mxResources.get('save'), false, 'save', null, true);
    }
</script>
</body>
</html>
